
/**
 * 
 * 原本使用react-captcha-code 这个第三方插件  但是会生成浅色字符验证码
 * 
 * 只针对颜色进行了处理  换成了class的形式
 * 
 * 如还想使用以前的第三方组件  只需在 login组件中 引入方式去掉My  即import Captcha from '../component/Captcha';
 * 
 * 
 * handleClickCaptcha
 *  这个方法是父组件传入的回调方法
 */
import React, { PureComponent } from 'react';
export default class Captcha extends PureComponent {
    state = {
        height: 40,//canvas的高
        width: 100,//canvas的宽
        bgColor: '#DFF0D8',//背景颜色
        charNum: 4,//验证码个数
        fontSize: 25,//验证码字体大小
        originalCharacter: [//可以生成验证码的字符
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            // 'a',
            // 'b',
            // 'c',
            // 'd',
            // 'e',
            // 'f',
            // 'g',
            // 'h',
            // 'i',
            // 'j',
            // 'k',
            // 'l',
            // 'm',
            // 'n',
            // 'p',
            // 'q',
            // 'r',
            // 's',
            // 't',
            // 'u',
            // 'v',
            // 'w',
            // 'x',
            // 'y',
            // 'z',
        ]
    };

    handleClick = () => {
        // 触发父组件传来的事件 更新
        this.props.handleClickCaptcha(this.generateCaptcha())
    }
    // 随机数字
    randomNum = (m, n) => {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }
    // 随机颜色
    randomColor = () => {
        return `rgb(${this.randomNum(0, 92)}, ${this.randomNum(0, 92)}, ${this.randomNum(0, 92)})`;
    }
    // 返回验证码
    generateCaptcha = () => {
        let { height, width, bgColor, fontSize, charNum, originalCharacter } = this.state
        let checkCode = '';
        let canvas = document.getElementById("canvas")
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath()
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, width, height);
        for (let i = 0; i < charNum; i++) {
            const charGap = Math.round(width / charNum)
            const offset = Math.round(charGap / 2) - 6;
            const code = originalCharacter[this.randomNum(0, originalCharacter.length - 1)];
            checkCode += code;
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.strokeStyle = this.randomColor();
            ctx.font = `${fontSize}px serif`;
            ctx.rotate((Math.PI / 180) * this.randomNum(-5, 5));
            ctx.strokeText(code, offset + i * charGap, height / 2 + 8);
            ctx.beginPath();
            ctx.moveTo(this.randomNum(0, width), this.randomNum(0, height));
            ctx.lineTo(this.randomNum(0, width), this.randomNum(0, height));
            ctx.stroke();
            ctx.restore();
        }
        return checkCode
    }
    componentDidMount() {
        // 页面初次渲染 第一次调用父组件传过来的函数并将新生成的验证码返回
        this.props.handleClickCaptcha(this.generateCaptcha())
    }
    render() {
        return (
            <canvas id="canvas" onClick={this.handleClick}></canvas>
        )
    }
}

